<template>
  <div class="audit-data-table">
    <u-table
      :data="tableData"
      :border="true"
      :height="height"
      :show-body-overflow="'tooltip'"
      :show-header-overflow="'tooltip'"
      stripe
      use-virtual
      style="width: 100%;">
      <u-table-column :type="'index'" :resizable="false" :lebel="'序号'" :prop="'$$$序号$$$'" :width="60" fixed>
        <span slot-scope="{$index}" class="data-cell index" :index="$index">
          <span class="data-index">
            {{$index + 1 + indexStart}}
          </span>
        </span>
      </u-table-column>
      <u-table-column
        v-for="(column, index) in tableColumns"
        :key="index"
        :prop="column.prop"
        :label="column.label"
      >
        <template #default="scope">
          <div>{{column.prop === 'requestType'?requestTypeMap[scope.row[column.prop]]:scope.row[column.prop]}}</div>
        </template>
      </u-table-column>
    </u-table>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
// @ts-ignore
import {UTable, UTableColumn} from 'umy-table'
import 'umy-table/lib/theme-chalk/index.css'



@Component({
  components: {
    UTable,
    UTableColumn
  }
})
export default class AuditDataTable extends Vue {

  private tableColumns = [
    {label: '用户名', prop: 'username', width: 70},
    {label: '请求时间', prop: 'requestTime', width: 150},
    {label: 'URL', prop: 'url', width: 150},
    {label: '参数', prop: 'params', width: null},
    {label: '操作类型', prop: 'requestType', width: 100},
    {label: '请求IP', prop: 'ip', width: 150},
    {label: '其他信息', prop: 'envInfo', width: 300},
    {label: '审计时间', prop: 'createTime', width: 150}
  ]
  @Prop({type: Array, default: () => []}) tableData!: any[]
  @Prop({type: Number, default: 600}) height!: number
  @Prop({type: Number, default: 1}) pageSize!: number
  @Prop({type: Number, default: 20}) currentPage!: number

  public get indexStart() {
    return this.pageSize* (this.currentPage - 1)
  }

  public requestTypeMap: any = {
    QUERY: '查询',
    ADD: '添加',
    DELETE: '删除',
    AUTH: '认证',
    IMPORT: '导入',
    OTHER: '其他',
  }

}
</script>

<style lang="less" scoped>
.audit-data-table {
  background-color: #fff;

  .audit-table-column {
    display: inline-block;
    max-width: 100%;
  }
}
</style>
